import React, { Component } from 'react'
import { PureComponent } from 'react'

//component更新状态判断==>


//shouldComponentUpdate(prevProps,prevtState)

class Child extends Component {
    // class Child extends PureCom {//进行父组件属性比较，然后判断是否更新
    shouldComponentUpdate(prevProps, prevtState) {
        // return false;
        return prevProps.num !== this.props.num;
    }
    render() {
        console.log('child-render');
        return (
            <div>
                <h2>这是子组件Child</h2>
                <h2>
                    {this.props.num}
                </h2>
            </div>
        )
    }
}

export default class PureCom extends Component {
// export default class PureCom extends PureComponent {
    state = { num: 0, list: [1,2,3] };
    a = 200;
    add = () => {

        this.setState({list:[4,...this.state.list]});//都可以改变

        //没有问题的push写法
        let arr = [...this.state.list];
        arr.push(4);
        this.setState({list:arr})

        // this.state.list.push(4);
        // this.setState({list:this.state.list});
        //用PureComponent，地址没有改变所以list不会更新
        //用Component，每次都会更新

        // this.setState({});
        // this.setState({ num: this.state.num + 1 });
        // return this.state.num;
    };
    // console.log(this.state.num);
    // console.log(this.a);
    render() {
        return (
            <div>
                {
                    this.state.list.map(item => <li>{item}</li>)
                }
                <h1>{this.state.num}</h1>
                <button onClick={this.add}>加一</button>
                <Child num={this.state.num} />
            </div>
        )
    }
}